<template>
  <el-container style="height: 100%;">
    <el-aside style="width: 170px">
      <div  style=" background-color: rgb(238, 241, 246); width: 170px">
        <el-menu style="overflow: hidden; min-height: 100%;"
                 :collapse-transition="false"
                 class="el-meun-vertical-demo, collectAside"
                 default-active="system"
        >
          <div><i class="el-icon-setting"/>消息中心</div>
          <div  style="border-bottom: 1px solid #e6e6e6;">
            <div >
              <el-menu-item index="comment" class="menu-item" @click="changeType('comment')" style="display: flex">回复我的</el-menu-item>
              <el-menu-item index="article" class="menu-item" @click="changeType('article')" style="display: flex">给我点赞</el-menu-item>
              <el-menu-item index="concern" class="menu-item" @click="changeType('concern')" style="display: flex">关注我的</el-menu-item>
              <el-menu-item index="system" class="menu-item" @click="changeType('system')" style="display: flex">系统消息</el-menu-item>
            </div>
          </div>
        </el-menu>
        <el-menu>
<!--          <div style="padding-top: 10px"><i class="el-icon-setting"/>消息设置</div>-->
        </el-menu>
      </div>

    </el-aside>
    <el-container >
      <el-main>
        <!-- 关注 -->
        <div  v-if="this.type == 'concern'" style="display: flex">
          <div style="width: 100%">
            <div  style=" background-color: rgb(238, 241, 246); width: 100%">
              <div  style="border: 1px solid #e6e6e6;">
                <div v-for="item in concernUsers" style="display: flex; border-bottom: 1px solid #ccc"  @click="loadUserConcernData()">
                  <!-- 头像 -->
                  <div style="width: 60px; text-align: center">
                    <el-image :src="item.avatarUrl" style="width: 50px; height: 50px; border-radius: 50%"></el-image>
                  </div>
                  <div style="margin-top: 20px; font-size: 16px; color: #409EFF; display: flex; width: 100%">
                    {{item.nickname}}
                    <div style="flex: 1; text-align: right; margin-right: 10px">
                      <el-button  type="text" style="" @click="$router.push('/front/user?id=' + item.id)">查看</el-button>
                    </div>
                  </div>

                </div>

              </div>
            </div>
          </div>
        </div>
        <div  v-if="this.type == 'system'">
          <div style="margin-top: 12px">
            <el-input style="width: 200px" placeholder="请输入发起人" suffix-icon="el-icon-search" v-model="SNickname" class="ml-5"></el-input>
            <el-button style="margin-left: 5px" type="primary" @click="load">搜索</el-button>
            <el-button style="margin-left: 5px" type="warning" @click="reset">重置</el-button>
          </div>
          <div style="margin: 6px 0">
            <el-popconfirm title="确认已读吗?" @confirm="delBatch">
              <template #reference>
                <el-button type="danger" >全部已读<i class="el-icon-remove-outline"></i></el-button>
              </template>
            </el-popconfirm>
          </div>
          <el-table :data="tableData" border stripe @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="type" label="消息类型" width="100">
              <template slot-scope="scope">
                <el-tag type="primary" v-if="scope.row.type === 'comment'">评论</el-tag>
                <el-tag type="warning" v-if="scope.row.type === 'article'">点赞</el-tag>
                <el-tag type="success" v-if="scope.row.type === 'collect'">收藏</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="snickname" label="发起人" width="120"></el-table-column>
            <el-table-column prop="description" label="描述" ></el-table-column>
            <el-table-column label="是否已读" width="70px">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isNew" active-color="#13ce66" inactive-color="#ccc"
                           @change="changeEnable(scope.row)"
                ></el-switch>
              </template>
            </el-table-column>

          </el-table>
          <div style="padding: 2px 0">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[2, 4, 6, 8]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>
        </div>
        <div  v-if="this.type == 'comment'">
          <div v-if="!this.comments" style="width: 100%">
            <div style="margin: 20px auto; text-align: center;">没有回复哦</div>
          </div>
          <div style="margin: 10px 0">
            <div v-for="item in comments" :key="item.id" style="border-bottom: 2px solid #ccc; margin-top: 16px">

              <div style="display: flex">
                <!--          内容-->
                <div style="flex: 1; font-size: 14px; padding: 10px 0; line-height: 24px">
                  <div style="display: flex">
                    <b>我的评论: </b>
                    <span>{{item.content}}</span>
                    <div style="text-align: right; flex: 1;">
                      <el-button style="margin-left: 5px; " type="text" @click="$router.push('/front/articleDetail?id=' + item.articleId)">查看原文</el-button>
                      <el-popconfirm title="确认删除吗?" @confirm="handleDelete(item.id)">
                        <template #reference>
                          <el-button size="small" v-if="item.userId === user.id" type="text"
                                     style="margin-left: 8px; color: #F56C6C">删除</el-button>
                        </template>
                      </el-popconfirm>
                    </div>
                  </div>
                  <div  style="display: flex">
                    <div style="width: 200px; line-height: 20px; margin-top: 16px">
                      <i class="el-icon-time" style="margin-right: 8px"></i><span>{{ item.time }}</span>
                    </div>

                  </div>
                </div>
              </div>
              <!--          回复-->
              <div v-if="item.children.length" v-for="subItem in item.children" :key="subItem.id" style="margin-left: 90px;padding-left: 20px;  border-top: 1px solid #ccc;">
                <div style="display: flex; font-size: 14px; padding: 10px 0;">
                  <!--              头像-->
                  <div style="width: 50px; text-align: center">
                    <el-image :src="subItem.avatarUrl" style="width: 30px; height: 30px; border-radius: 50%"></el-image>
                  </div>
                  <!--              内容-->
                  <div style="flex: 1; line-height: 24px">
                    <b v-if="subItem.nickname">{{subItem.nickname}}: </b>
                    <b v-else>用户已注销: </b>
                    <span style="color: #3F5EFB; margin-right: 10px">@ {{RNickname}}</span>

                    <span>{{subItem.content}}</span>
                    <div  style="display: flex">
                      <div style="width: 200px; line-height: 20px; margin-top: 16px">
                        <i class="el-icon-time" style="margin-right: 8px"></i><span>{{ subItem.time }}</span>
                      </div>
                      <div style="text-align: right; flex: 1;">
                        <el-button style="margin-left: 5px; " type="text" @click="handleReply(subItem.id, subItem.nickname, subItem.orginId, subItem.articleId)">回复</el-button>
                        <el-popconfirm title="确认删除吗?" @confirm="handleDeleteComment(subItem.id)">
                          <template #reference>
                            <el-button size="small" v-if="subItem.userId === user.id" type="text"
                                       style="margin-left: 8px; color: #F56C6C">删除</el-button>
                          </template>
                        </el-popconfirm>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <el-dialog :title="'回复: @'+ replyNickname" :visible.sync="dialogCommentVisible" width="60%">
                <el-form :model="commentForm" label-width="80px" >
                  <el-form-item label="回复内容">
                    <el-input type="textarea" v-model="commentForm.contentReply"></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogCommentVisible = false; commentForm = {}">取 消</el-button>
                  <el-button type="primary" @click="saveComment">确 定</el-button>
                </div>
              </el-dialog>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<style>

</style>

<script>
import user from "@/views/User.vue";

export default {
  name: "FrontMessage",
  data() {
    return {
      tableData: [],
      total:0,
      SNickname:"",
      RNickname:"",
      pageSize:4,
      pageNum:1,
      dialogFormVisible: false,
      multipleSelection: [],
      type: "",
      commentForm: {},
      dialogCommentVisible: false,
      comments: [],
      concernUsers: [],
      concernData: [],
      replyNickname:"",
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) :{},
    }
  },
  created() {
    if(!this.user) {
      this.$router.push("/front/home")
    }
    this.type = "system"
    this.RNickname = this.user.nickname
    this.load();
  },
  methods : {
    loadConcernData(userId) {
      this.request.get("concern/article/" + userId).then(res => {
        this.concernData = res.data
      })
    },
    loadUserConcernData() {
      this.request.get("message/concern/" + this.user.id).then(res => {
        this.concernData = res.data
      })
    },
    loadConcernUsers() {
      this.request.get("/concern/users/" + this.user.id).then(res => {
        this.concernUsers = res.data
      })
    },
    changeType(type) {
      this.type = type
      if (type == 'comment') {
        this.loadComments()
      }
      if (type == 'concern') {
        this.loadConcernUsers()
        this.loadConcernData(this.user.id)
      }

    },
    load() {
      this.request.get("message/page",{
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          RNickname: this.RNickname,
          SNickname: this.SNickname
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    loadMessage() {
      this.request.get("message/isNew",{
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          RNickname: this.RNickname
        }
      }).then(res => {
        this.tableData = res.data
      })
    },
    // 请求查询评论数据
    loadComments() {
      this.request.get("/message/myReply").then(res =>{
        this.comments = res.data
        // console.log(this.comments)
        // console.log(this.user)
      })
    },
    // 回复操作
    handleReply(pid, nickname, orginId, articleId) {
      this.commentForm = {}
      this.dialogCommentVisible = true
      this.commentForm = {pid : pid, orginId: orginId, articleId: articleId}
      this.replyNickname = nickname
    },
    // 删除
    handleDeleteComment(id){
      this.request.delete("/comment/" + id).then(res => {
        if (res.data) {
          this.$message.success("删除成功")
        } else {
          this.$message.error("删除失败")
        }
        this.loadComments()
      })
    },
    // 保存
    saveComment() {
      if (this.commentForm.contentReply) {
        this.commentForm.content = this.commentForm.contentReply
      }
      this.request.post("/comment", this.commentForm).then(res =>{
        if(res.data) {
          this.$message.success("评论成功")
          this.commentForm = {}
          this.loadComments()
        } else {
          this.$message.error(res.msg)
        }
      })
      this.dialogCommentVisible = false
    },
    // 改变页大小
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load();
    },
    // 改变当前页
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load();
    },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row)) //深拷贝
      this.form.id = row.id;
      this.dialogFormVisible = true;
    },
    changeEnable(row) {
      this.request.post("/message", row).then(res =>{
        if(res.code === '200') {
          this.$message.success("更新成功")
        } else {
          this.$message.error("更新失败")
        }
      })
    },
    //实现批量选择
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    //批量删除
    delBatch() {
      let ids = this.multipleSelection.map(v => v.id) // 得到每个选择对象的 id
      console.log(ids)
      if(ids.length === 0) {
        this.$message.warning("未进行选择")
        return
      }
      this.request.post("/message/old/batch", ids).then(res => {
        if (res.data) {
          this.$message.success("批量已读")
        } else {
          this.$message.error("批量已读失败")
        }
        this.load()
      })
    },
    reset() {
      this.SNickname = ""
      this.load()
    },
  }

}
</script>